Introduction

WebDesign provides advanced features to create and maintain web sites. Edit web sites from your hard drive or directly from your FTP server. Web Design allows you to create HTML elements visually and then enter them its powerful text editor.  Web Design's wizards help you easily generate links, image maps, form elements and more... Users can create there own plugins, making Web Design's functionality endless.

Web Design's text editor includes unique features that make web authoring a whole lot users. A properties window allows you to view and edit tag attributes. Syntax colouring allows users to easily recognize tags, attributes and attribute values. Customizable toolbars and a built in file browser add to Web Design's ease of use and convenience. Web Design's brings new features to HTML editors on the Mac. Condense text into pictures for better organization and keep shortcuts of commonly used text.

When you are finished creating or editing your web site use Web Designs HTML syntax checker and optimizer to get the best performance out of your web site. Preview your web site in any browser, translate it into multiple languages, than upload it to your FTP server right from within Web Design.

System Requirements

WebDesign requires Mac OS 8.5 or higher. The recommended disk space is at least 6MBs with a minimum requirement of 4MB of RAM. 

Contact Information

If you need technical support please feel free to contact Rage Software or DerazSoft using one of the emails below.

Rage Software
support@ragesw.com - bugs/suggestions concerning WebDesign
info@ragesw.com - general questions/comments for Rage Software

DerazSoft

support@derazsoft.com - questions regarding derazsoft and any of their products

Getting Started - Chapter 1

WebDesign uses a variety of visual elements to aid you in creating your web sites. It allows you to create and edit HTML tags and their attributes visually making web sites easier to write and maintain. Its visual elements, also referred to as wizards derive from the Tools Window. You can drag and drop these HTML wizards from the Tools Window anywhere in your document.

The customizable toolbar located near the top of the screen gives you quick access to many of WebDesign's most common features. Features include creating, opening and downloading files as well as performing many other common tasks. Using the preferences you are able to customize this toolbar to your likings. 

The properties window, located near the left of your document allows you to view and edit tag attributes. The properties window will only list HTML 4.0 tags and attributes making sure that you don't add HTML tags that will not be supported by all browsers. 

Working With Files - Chapter 2

WebDesign combines many unique and convenient features to help you work with your HTML files and web site folders. 

Creating New Documents

WebDesign allows you to create new HTML Documents, New Frames Document, a new document with stationary or just a new blank document. You will find all of these options under the File menu in your menu bar as well as most of them in the document menu in an open document window. 

When you select new HTML file a new document window will appear allowing you to view and edit your page properties. From here you can specify your web page title, META Tags and Body properties. Clicking OK will create your new web page. 

When you select New Frames File a dialog will appear allowing you to specify what kind of frames you want as well as some frame properties. However this window only supports 2 frames.

New Document with Stationary allows you to create a new document starting from one of the files in your Stationary Folder.

Selecting New Blank Document simply opens a new document with no text in it allowing you to start a web page from scratch.

Opening Documents

WebDesign allows you to open documents from local or remote drives (including FTP servers), and it also allows you to open documents by downloading them straight from the World-Wide-Web. Using the built in File Browser you are able to browse your Hard Drives in a Macintosh Explorer like interface. This allows you to easily maintain Web site folders while working in WebDesign. You may also use WebDesign's built in FTP Browser to browse remote servers right from within WebDesign. Editing files from your FTP server is almost the same as editing files right from your Hard Drive. When you save documents they are automatically saved back to your FTP server without any more work from you.

When a file is opened WebDesign will remember them and add them to a Recent Items Menu in the File Menu. This gives you quick access to your commonly used documents. Also, if you constantly create the same kind of document using the same format you can place document skeletons in the stationary folder to have quick access to them from within WebDesign. 

Editing Documents

To edit your web pages in WebDesign you use WebDesign’s feature rich text editor. Using the Tools Window you will be able to quickly edit your documents by easily inserting HTML tags and attributes. If you don't want to use the Tools window you may benefit from the features of the properties window. Just click inside an HTML tag to see all of its attributes and their values listed in the properties window. From here you can easily view and edit all the HTML 4.0 attributes for the selected tag.  

You may also chose to use Language Extensions which are completely customizable and allow you to switch to different languages. You can find more information on Language Extensions in Chapter 7 of this documentation.

When working with WebDesign will notice that HTML tags are colour coded. This means that, depending on what you specify in your preferences, HTML tags will have different colours then the regular text to make them more visible and easier to read. This also helps spot errors in your document such as left out quotes.

Saving Documents

WebDesign allows you to save documents on your local Hard Drive or remote FTP servers using the built in FTP Browser. You can find these options from the File Menu or from the Document menu in any document window. 

If you already have a file that was opened from the built in FTP Client it will be automatically saved to your FTP Server. You can see the status right from the current document window.

Backing Up Files

WebDesign allows you to backup your web pages so that they can be easily restored if the original are lost. Just chose Make Back Up Now to create a backup in the Back Up folder within the WebDesign folder. If you do not have a Backup Folder one will automatically be created to store the current backed up files and other files that are backed up later on. As of WebDesign 1.0 you can not change the folder that files are backed up too.

Working With HTML - Chapter 3

Using HTML Wizards

The HTML wizards located in the Tools Window and in the Insert Menu, allow you to easily insert HTML Tags without knowledge of HTML or if you just can't remember all the HTML tags and attributes. These HTML wizards give you a visual look at HTML Tags allowing you to easily create almost all supported HTML 4.0 Tags as well as other tags supported only by specific browsers.

You will also find that most of the HTML wizards include a thorough description of the tag and use balloon help to explain what the Tag Attributes do. This will help all beginners learn HTML and help Professional users insert tags with ease.

New in WebDesign 1.2 is the ability to set the output settings for each wizard or globally for all wizards. All wizards contain a new preferences menu in the bottom left corner. This menu allows you to select the following settings;

Make tags lowercase
Output XHTML code
Never insert unused attributes

The first option will output the HTML tags in lowercase. The second option will output the code in XHTML mode. This means that the code will be generated in lowercase, all attributes will be given a value (i.e. checked will now become checked="checked". and tags with no ending tag will be output correctly according to the XHTML standards. The third option will never generate unused attributes even if the attribute is required. 

These options can be set globally using the Application Preferences. When working in an XHTML document Output XHTML code will always be selected.

Editing Tag Attributes

WebDesign brings a unique feature to HTML Editors on the Mac which allows you to easily view and edit HTML tags in an organized list. Just click inside an HTML Tag and its attributes will be listed in the properties window. If you don't see the properties window just select Show Properties Window from the Windows Menu.

The tags and attributes supported by the properties window are completely customizable. You can edit the supported tags and attributes in the preferences. You can find more information about that in Chapter 5. 

The Properties window has a special feature which allows you to stick it to the current document window. This feature makes sure that the properties window will always be right where you need it. Just click the magnet icon to make it stick to the current document window. 

When working with an XHTML document the code will automatically be inserted as XHTML code.

Converting HTML Code to XHTML Code.

WebDesign allows you to convert your HTML code to XHTML code in just seconds. To convert your HTML document go to HTML Tools->Convert XHTML->HTML. Select the XHTML options and press the OK button. The current document will be converted to an XHTML document. 

WebDesign uses the settings from the HTML Tags preferences to convert your HTML code to XHTML. It may not work correctly if you leave out optional ending attributes such as </P> or </LI>. This is because it does not look for a tag without an ending tag, instead it knows before hand which tags do not have ending tags. You can however edit the HTML Tags preferences to make WebDesign think that optional tags such as </P> or </LI> are not required. See Chapter 5 for more details on how to accomplish this.

HTML Entities

The HTML entities allows you to view and insert some of the most common HTML Entities into your document. This feature prevents you from having to memorize all the special characters. To view this window select HTML Entities from the Windows Menu.

Checking HTML Syntax

After you are finished creating and editing your HTML use WebDesign's built in HTML syntax checker to make sure there aren't any errors within your document. The HTML syntax checker will look for invalid tags and tag attributes as well as un even number of quotes in a tag and tag attributes with no values. 

The tags and attributes supported by the HTML syntax checker are completely customizable via the preferences. See Chapter 5 for more information.

Optimizing HTML

The Optimize HTML feature will remove unneeded ending tags and will shorten tags that can be shorten but still produce the same relative effect. Please note that this may slightly change the appearance of you web site. Only use this feature if you want to get the smallest file size possible.

You can optimize certain parts of your document by highlighting the HTML code that you want to optimize. If you want to leave out multiple parts of your document that should not be optimized just select that text and condense it into a picture using WebDesign's condense text feature.

When working in XHTML mode, WebDesign will not remove optional ending tags. 

Previewing Web Pages

While working on your web site you can preview it in Internet Explorer, Netscape Navigator, iCab or you can preview your web site as text. If you don't have one of these internet browsers installed you will not be able to preview your document in that browser.

If your document is saved then the actual file will be previewed. Otherwise a temporary file will be created and shown in your browser. This may not show the results that you are expecting because it wont be able to find included files such as pictures if you are using relative paths.

Exporting Web Sites

If you need to export your web site into a different format, WebDesign comes preset with some popular file formats that you can select from. You can export your files as an Internet Explorer Document, a Netscape Navigator Document, an iCab Document, a Code Warrior Document or a BBedit Document.

You can also chose the Same As... option to export it as a selected document.

Creating Image Maps

WebDesign allows you to visually create client side image maps. Using the image tag wizard you can create an image map for a selected picture. When you select the picture just check the USEMAP checkbox to get the Image Map Maker window. You will see four windows. One allowing you to input the Image name and select the current shape, one that lists the already created shapes, one that shows the actual picture and another that allows you to edit the attributes for the selected shape.

To start creating an image map just select a shape, either square or circle, then drag the mouse over the area of the picture starting from the top left to the bottom right. The shape will automatically be listed in the Shapes Window. To edit the shapes attributes just select the shape in the list. You will notice that the currently selected shape is highlighted in the Image Window.

Once you have completed your image map click the OK button to be taken back to the image window. When you click the insert button in the image window the code for the Image Map will be inserted into your document.

Translating Web Sites

WebDesign includes a very unique feature to HTML Editors which is the ability to translate web sites to many different languages and back. Just select Translate Document... from the edit menu. You will be presented with a new dialog where you can select your preferred languages. 

Please note that this feature uses the internet to translate your documents, It may not be precise and may include some grammatical errors. Do not rely on this for professional web sites. 

Working With Text - Chapter 4

Text Editor

WebDesign's text editor provides some very convenient features that you will find useful while editing HTML documents. Some things that you will notice is that when you are editing a Table or a List and you press return while holding shift after a </TD> or a </LI> tag, WebDesign will create a new Table Cell and List Item respectively. 

The text editor also includes some useful drag and drop features. Drag a GIF or JPEG file into the text editor to have the image window automatically open with the correct path, height and width of the picture.

Also notice that <BR> tags will be automatically deleted with just one click of the delete key. If you want to delete a whole tag hold shift when the cursor is beside it.

A new feature introduced in version 1.1 is contextual menus within the text editor. Just control-click within a tag to have all of its attributes listed in the contextual menu. Select one of the attributes to have it inserted into the tag. You can add, remove and edit the attributes that show up in this menu. You can also add support for additional HTML tags from the preferences window. For more information refer to Chapter 5.

Find & Replace

WebDesign's provides very advanced and extremely fast find and replace features. By pressing Command-F you will be able to access the find and replace features of WebDesign.

The Find and Replace Window is very self explanatory. Enter your search string into the top field and to replace a string enter the text in the bottom field. If you are not using the replace feature you will not have to fill in the replace field. 

When you click the Find button, WebDesign will search your document for the inputted string. When you click the Find All Button WebDesign will list all of the found strings in a list in the current document window. You can double click one of the items in the list to where it is in your document. (Please not that as of version 1.1 if you edit your document, WebDesign may not be able to locate the string again and you may have to do another search.)

When you click the Replace button the first occurrence of the string that is found in the document is replaced with the string in the replace field. When you select the Replace All button, all occurrences of the string within your document are replaced with the string in the replace field.

WebDesign not only allows you to search and replace strings within your document but it also gives you extended functionality, With the find and replace features you can search for case sensitive strings meaning all letters included case must match the inputted strings. You also have the option to search for the string in reverse and you can also make sure that WebDesign only finds matches that are whole words.

The Find and Replace Window also gives you the options of where to start and finish your search and what kind of selection you want. You can specify to start at the top of your document, from the current position of the cursor or within the selection. If you select Extended Selection then WebDesign will extend the selection from the cursor position to the end of the found word.

Condensing Text

WebDesign brings a unique feature to Macintosh HTML Editors which allows to condense the selected text. This allows for more organization and makes your documents easier to work with.

Condensing text can also be used to exclude certain text from various features. For example if you want to search a document but only in certain areas you can exclude text from being searched by condensing it. Another place where condensing text is useful is when optimizing your HTML. You can exclude certain parts of your document to not be optimized.

When you save a file the condensed state will not be remembered. Your document will always be saved as a regular HTML file. This is to ensure compatibility with browsers and third party editors.

Using Shortcuts

WebDesign allows you to store commonly used text as shortcuts. These shortcuts can be accessed at later times and inserted into your document. To access the shortcuts feature go to Window->shortcuts. 

You can paste the text currently in the clipboard into the shortcut window. You can also copy the selected text to the clipboard by pressing the copy button. To remove text just select the text you want to remove and press the remove button.

Clipboard History

WebDesign will remember all text that was cut or copied from your documents, allowing you to refer to it at a later time. By going to Edit->Show Clipboard History you can view your past clipboards. Once here you can copy text from old clipboards and paste them in your document. The clipboard history will only track copied or cut text from within WebDesign not from within other applications.

Preferences - Chapter 5

Application

The application preferences allow you to modify some of WebDesign's features which are used throughout the application. You may set how you want to display Recent items, if you would like WebDesign to display tool tips, if Shift delete show delete a whole tag and if pressing enter should enter a <BR> tag in your document. These preferences will take affect immediately after they are saved.

Editor Defaults

The Editor Defaults preferences only affect newly created or opened documents. These preferences allow you to change the default behaviour and look of WebDesign's Text Editor. You may specify fonts and font sizes which WebDesign should use within its text editor. You may also choose to show the current cursor position in the bottom left corner of your document, if you would like WebDesign to colour HTML syntax, Soft wrap options and turn Auto Indent on or off.

Since these preferences do not affect any of the already opened documents you may wish to change the settings for the current document by going to Edit->Document Settings. From the Document Settings you can also switch between HTML and XHTML mode.

Text Colouring

Use these preferences to set the various colours of the text. Including HTML tags, attributes, attribute values and the text field's background colour. These preferences will only take affect if you have Syntax Colouring enabled. The Keyword colour is only applicable if you are using the 'Only colour HTML 4.0 tags' options.

FTP Options

The FTP Preferences affect the behaviour of built in FTP client. You may set the FTP client to show files starting with '.', connect to FTP servers using Passive Mode and chose to close the FTP session window after a transfer, i.e. download or upload a file, is complete. You can also edit your FTP bookmarks from this tab as well.

Toolbar

The Toolbar preferences allow you to select the buttons that should appear and that should not appear in the customizable toolbar. Click the checkbox beside an item to make it appear in the toolbar. 

On Open

The On Open Preferences specify what should happen when WebDesign is opened. Either by double clicking it in the Finder or opening a WebDesign HTML file. You can tell WebDesign what windows to open and to convert files to Macintosh files when they are opened.

Saving

The Saving Preferences allow you to specify what WebDesign should do when it saves a file either to a local drive or a remote server. Your document can be saved to ensure compatibility with various Operating systems and you may also chose to back up your documents when they are saved. When you back up your document it will be saved in the 'Backup' folder located in the same folder of the WebDesign application.

HTML Tags

The HTML tags preferences allow you to add or remove tags to WebDesign's database. The tags that are added will be used when Colour HTML 4.0 tags are enabled. The tag attributes will be shown in the properties window as well as in the Contextual Menu when you control click within the associated tag. WebDesign also uses these tags when performing the HTML syntax checker.

When you double click a tag in the list a new window appears allowing you to add, edit or remove tags. New in WebDesign 1.2 is the ability to specify which tags do not have ending tags. Just place a '/' before the tag name so WebDesign knows the tag does not have an ending tag. This is useful when working with XHTML documents. WebDesign uses this information when generating XHTML code from the HTML wizards and when converting HTML to XHTML.

Extending WebDesign’s Features - Chapter 6

Language Extensions

Language Extensions allow you to create custom languages to be easily inserted into a WebDesign document. You can easily create a language extension within the Plugin Maker (read below). Please download the Plugin Maker from our web site at http://www.ragesw.com/webdesign/ for more information.

Creating Plugins

WebDesign allows you to extend its features via plugins. Plugins can be created to aid your web site development. To create plugins you must get the Plugin Maker from our web site at http://www.ragesw.com/webdesign/. The Plugin Maker allows you to create plugins in a visual development environment so that any user can create plugins without any programming skills.